<template>
  <div>
    <div class="header">
      <span style="width: 60px; text-align: right">关键字</span>
      <el-input placeholder="请输入关键字" v-model="cmpReq.keyword" style="width: 200px; margin-left: 10px"></el-input>
      <el-button type="primary" style="margin-left: 34px" size="small" @click="getCompanies()">
        关键字搜索
      </el-button>
      <el-button type="success" style="margin-left: 34px" size="small" @click="
        () => {
          newCompany = {}
          addCompanyVis = true
        }
      ">
        公司录入
      </el-button>
      <a style="margin-left: 20px" href="https://www.gsxt.gov.cn/index.html" target="_blank">
        国家企信网（查询企业信息）
      </a>
    </div>
    <div class="main">
      <div style="width: 500px; height: 100%">
        <el-table style="overflow: auto" height="100%" :data="cmpRes.Items" stripe border highlight-current-row
          @row-click="
            (row) => {
              chooseCompany = row
              getEmployees()
              // getCompanyAuths()
              getCompanyDepartments()
            }
          ">
          <el-table-column label="公司名">
            <template slot-scope="scope">
              [{{ scope.row.CMP_ID }}]
              <span>{{ scope.row.CMP_Name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button type="text" @click="cmpCombineVis = true">
                公司合并
              </el-button>
              <el-button type="text" @click="editCompanyVis = true">
                修改
              </el-button>
              <el-button type="text" @click="deleteCompany(scope.row.CMP_ID)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 100%; height: 40px">
          <el-pagination layout="total,prev,pager,next" style="float: right" background small
            :current-page.sync="cmpReq.pageIndex" :total="cmpRes.Total" :page-size="cmpReq.pageSize"
            :page-sizes="[10, 15, 20]" @size-change="
              (val) => {
                cmpReq.pageSize = val
                getCompanies()
              }
            " @current-change="getCompanies()"></el-pagination>
        </div>
      </div>
      <div style="
          width: calc(100% - 400px);
          height: 100%;
          background-color: #f0f0f0;
          overflow: auto;
        " v-if="chooseCompany">
        <div style="margin: 20px">
          简称：
          <el-tag v-for="(item, index) in chooseCompany.shortNames" :key="index">
            {{ item }}
          </el-tag>
        </div>
        <div style="margin: 20px">
          <span v-if="chooseCompany.CMP_Name">
            全称：{{ chooseCompany.CMP_Name }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_ShortSpeling">
            编号缩写：{{ chooseCompany.CMP_ShortSpeling }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_TaxNo">
            统一税号：{{ chooseCompany.CMP_TaxNo }}
          </span>
        </div>
        <div style="margin: 20px">
          <span v-if="chooseCompany.CMP_Bank">
            开户行：{{ chooseCompany.CMP_Bank }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_Account">
            开户账号：{{ chooseCompany.CMP_Account }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_LegalRepresentative">
            法人：{{ chooseCompany.CMP_LegalRepresentative }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_LegalRepresentativePhone">
            法人联系电话：{{ chooseCompany.CMP_LegalRepresentativePhone }}
          </span>
        </div>
        <div style="margin: 20px">
          <span v-if="chooseCompany.CMP_Address">
            地址：{{ chooseCompany.CMP_Address }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_Phone">
            联系电话：{{ chooseCompany.CMP_Phone }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_Web">
            网址：{{ chooseCompany.CMP_Web }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_ContactName">
            紧急联系人：{{ chooseCompany.CMP_ContactName }}
          </span>
          <span style="margin-left: 20px" v-if="chooseCompany.CMP_ContactPhone">
            紧急联系电话：{{ chooseCompany.CMP_ContactPhone }}
          </span>
        </div>
        <!-- <div style="margin: 20px">
          权限：
          <el-tag type="success" v-for="(item, index) in cmpAuths" :key="index" closable
            @close="deleteCompanyAuth(item.CA_ID)">
            {{ item.AUTH_Name }}
          </el-tag>
          <el-link type="primary" style="margin-left: 10px" @click="addCompanyAuthVis = true">
            添加权限
          </el-link>
        </div> -->
        <div style="margin: 20px">
          部门查阅权限：
          <el-tag type="primary" v-for="(item, index) in cmpDpms" :key="index">
            {{ item.DPM_Name }}
          </el-tag>
        </div>
        <div style="margin: 20px; background-color: E0E0E0">
          <div style="margin-bottom: 10px">
            <el-link type="primary" @click="addEmployeeVis = true">
              添加用户
            </el-link>
          </div>
          <el-table :data="empRes.Items">
            <el-table-column prop="EMP_ID" label="ID" width="60"></el-table-column>
            <el-table-column prop="USR_Name" label="员工" width="100"></el-table-column>
            <el-table-column prop="EMP_StatusDesc" label="状态" width="80"></el-table-column>
            <el-table-column prop="USR_Phone" label="手机号码" width="200"></el-table-column>
            <el-table-column prop="USR_Phone1" label="联系方式" width="200"></el-table-column>
            <el-table-column prop="USR_Address" label="地址"></el-table-column>
            <el-table-column prop="USR_Email" label="邮箱"></el-table-column>
            <el-table-column label="操作" width="260px" align="right">
              <template slot="header" slot-scope="scope">
                <el-input v-model="empReq.keyword" size="mini" placeholder="输入关键字搜索" @input="
                  (val) => {
                    empReq.keyword = val
                  }
                ">
                  <template slot="append">
                    <el-button slot="append" icon="el-icon-search" @click="getEmployees"></el-button>
                  </template>
                </el-input>
              </template>
              <template slot-scope="scope">
                <el-button type="text" @click="
                  chooseEmployee = scope.row
                editEmployeeVis = true
                  ">
                  修改/完善
                </el-button>
                <el-button type="text" @click="showEmployeeCombine(scope.row)">
                  合并
                </el-button>
                <el-button type="text" v-if="scope.row.EMP_Status == 0"
                  @click="unfreezeEmployee(scope.row.ECV_TargetID)">
                  启用
                </el-button>
                <el-button type="text" v-if="scope.row.EMP_Status == 1" @click="freezeEmployee(scope.row.ECV_TargetID)">
                  注销
                </el-button>
                <el-button type="text" @click="deleteEmployee(scope.row.ECV_TargetID)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%; height: 40px">
            <el-pagination layout="total,prev,pager,next" style="float: right" background small
              :current-page.sync="empReq.pageIndex" :total="empRes.Total" :page-size="empReq.pageSize"
              :page-sizes="[8, 12, 16]" @size-change="
                (val) => {
                  empReq.pageSize = val
                  getEmployees()
                }
              " @current-change="getEmployees()"></el-pagination>
          </div>
        </div>
      </div>
    </div>

    <el-drawer :visible.sync="addCompanyVis" title="添加公司">
      <div style="padding: 20px">
        <el-form label-width="110px" :model="newCompany" ref="newCompany">
          <el-form-item label="公司全称" prop="CMP_Name" :rules="[{ required: true, message: '请填写公司全称' }]">
            <el-input v-model="newCompany.CMP_Name" placeholder="请输入公司全称"></el-input>
          </el-form-item>
          <el-form-item label="税号" prop="CMP_TaxNo" :rules="[{ required: true, message: '请填写统一税号' }]">
            <el-input v-model="newCompany.CMP_TaxNo" placeholder="请输入统一税号"></el-input>
          </el-form-item>
          <el-form-item label="编号缩写" prop="CMP_ShortSpeling">
            <el-input v-model="newCompany.CMP_ShortSpeling" placeholder="请输入编号缩写（用于生成各类编号如案件编号）"></el-input>
          </el-form-item>
          <el-form-item label="公司简称">
            <el-tag v-for="(item, index) in newCompany.shortNames" :key="index" closable
              @close="newCompany.shortNames.splice(index, 1)">
              {{ item }}
            </el-tag>
            <el-input class="input-new-tag" v-if="addShortNameVis" v-model="newShortName" ref="newShortName"
              size="small" @keyup.enter.native="addShortName" @blur="addShortName(newCompany)"></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showAddShortName()">
              + 新简称
            </el-button>
          </el-form-item>
          <el-form-item label="开户行">
            <el-input v-model="newCompany.CMP_Bank" placeholder="请输入开户行"></el-input>
          </el-form-item>
          <el-form-item label="开户账户">
            <el-input v-model="newCompany.CMP_Account" placeholder="请输入开户账户"></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="newCompany.CMP_Address" placeholder="请输入公司地址"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="newCompany.CMP_Phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="网址">
            <el-input v-model="newCompany.CMP_Web" placeholder="请输入网址"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人">
            <el-input v-model="newCompany.CMP_LegalRepresentative" placeholder="请输入法定代表人"></el-input>
          </el-form-item>
          <el-form-item label="法人联系电话">
            <el-input v-model="newCompany.CMP_LegalRepresentativePhone" placeholder="请输入法人联系电话"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人">
            <el-input v-model="newCompany.CMP_ContactName" placeholder="请输入紧急联系人"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系电话">
            <el-input v-model="newCompany.CMP_ContactPhone" placeholder="请输入紧急联系电话"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="addCompany" size="medium" type="primary" icon="el-icon-circle-check" title="添加">
              添加
            </el-button>
            <el-button @click="addCompanyVis = false" size="medium" title="取消">
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-drawer :visible.sync="editCompanyVis" title="公司信息修改">
      <div style="padding: 20px">
        <el-form label-width="110px" :model="chooseCompany" ref="chooseCompany" v-if="chooseCompany">
          <el-form-item label="公司全称" prop="CMP_Name" :rules="[{ required: true, message: '请填写公司全称' }]">
            <el-input v-model="chooseCompany.CMP_Name" placeholder="请输入公司全称"></el-input>
          </el-form-item>
          <el-form-item label="税号" prop="CMP_TaxNo" :rules="[{ required: true, message: '请填写统一税号' }]">
            <el-input v-model="chooseCompany.CMP_TaxNo" placeholder="请输入统一税号"></el-input>
          </el-form-item>
          <el-form-item label="编号缩写" prop="CMP_ShortSpeling">
            <el-input v-model="chooseCompany.CMP_ShortSpeling" placeholder="请输入编号缩写（用于生成各类编号如案件编号）"></el-input>
          </el-form-item>
          <el-form-item label="公司简称">
            <el-tag v-for="(item, index) in chooseCompany.shortNames" :key="index" closable
              @close="chooseCompany.shortNames.splice(index, 1)">
              {{ item }}
            </el-tag>
            <el-input class="input-new-tag" v-if="addShortNameVis" v-model="newShortName" ref="newShortName"
              size="small" @keyup.enter.native="addShortName" @blur="addShortName(chooseCompany)"></el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showAddShortName()">
              + 新简称
            </el-button>
          </el-form-item>
          <el-form-item label="开户行">
            <el-input v-model="chooseCompany.CMP_Bank" placeholder="请输入开户行"></el-input>
          </el-form-item>
          <el-form-item label="开户账户">
            <el-input v-model="chooseCompany.CMP_Account" placeholder="请输入开户账户"></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="chooseCompany.CMP_Address" placeholder="请输入公司地址"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="chooseCompany.CMP_Phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="网址">
            <el-input v-model="chooseCompany.CMP_Web" placeholder="请输入网址"></el-input>
          </el-form-item>
          <el-form-item label="法定代表人">
            <el-input v-model="chooseCompany.CMP_LegalRepresentative" placeholder="请输入法定代表人"></el-input>
          </el-form-item>
          <el-form-item label="法人联系电话">
            <el-input v-model="chooseCompany.CMP_LegalRepresentativePhone" placeholder="请输入法人联系电话"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人">
            <el-input v-model="chooseCompany.CMP_ContactName" placeholder="请输入紧急联系人"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系电话">
            <el-input v-model="chooseCompany.CMP_ContactPhone" placeholder="请输入紧急联系电话"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="editCompany" size="medium" type="primary" icon="el-icon-edit" title="保存">
              保存
            </el-button>
            <el-button @click="editCompanyVis = false" size="medium" title="取消">
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-drawer title="添加用户" :visible.sync="addEmployeeVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%" :model="newEmployee" ref="newEmployee">
        <el-form-item label="姓名" prop="USR_Name" :rules="[{ required: true, message: '请填写姓名' }]">
          <el-input v-model="newEmployee.USR_Name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="USR_Phone" :rules="[{ required: true, message: '请填写手机号码' }]">
          <el-input v-model="newEmployee.USR_Phone"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="newEmployee.USR_Phone1"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select filterable v-model="newEmployee.USR_Sex" style="width: 100%">
            <el-option v-for="item in sexes" :key="item.val" :label="item.label" :value="item.val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input v-model="newEmployee.USR_Address"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="newEmployee.USR_IDCard"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="newEmployee.USR_Email"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newEmployee.EMP_Remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addEmployee" size="medium" type="primary" icon="el-icon-circle-check" title="添加">
            添加
          </el-button>
          <el-button @click="addEmployeeVis = false" size="medium" title="取消">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="编辑用户" :visible.sync="editEmployeeVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%" :model="chooseEmployee" v-if="chooseEmployee"
        ref="chooseEmployee">
        <el-form-item label="姓名" prop="USR_Name" :rules="[{ required: true, message: '请填写姓名' }]">
          <el-input v-model="chooseEmployee.USR_Name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="USR_Phone" :rules="[{ required: true, message: '请填写手机号码' }]">
          <el-input v-model="chooseEmployee.USR_Phone"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="chooseEmployee.USR_Phone1"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select filterable v-model="chooseEmployee.USR_Sex" style="width: 100%">
            <el-option v-for="item in sexes" :key="item.val" :label="item.label" :value="item.val"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input v-model="chooseEmployee.USR_Address"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="chooseEmployee.USR_IDCard"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="chooseEmployee.USR_Email"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="chooseEmployee.EMP_Remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="editEmployee" size="medium" type="primary" icon="el-icon-circle-check" title="保存">
            保存
          </el-button>
          <el-button @click="chooseEmployeeVis = false" size="medium" title="取消">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="添加权限" :visible.sync="addCompanyAuthVis" direction="rtl">
      <el-table :data="auths" style="margin: 10px">
        <el-table-column prop="AUTH_ID" label="ID"></el-table-column>
        <el-table-column prop="AUTH_Name" label="权限"></el-table-column>
        <el-table-column prop="AUTH_Description" label="描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="addCompanyAuth(scope.row.AUTH_ID)">
              添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <el-dialog :visible.sync="cmpCombineVis" title="公司合并" width="400px">
      <el-form label-width="80px" v-if="chooseCompany">
        <el-form-item label="原公司" type="textarea" :rows="3">
          <el-input v-model="chooseCompany.CMP_Name" disabled></el-input>
        </el-form-item>
        <el-form-item label="合并至">
          <el-select style="width: 260px" filterable remote reserve-keyword placeholder="请输入（全称/简称/税号..）关键词搜索"
            :remote-method="getCombineCompanies" v-model="cmpCombineReq.targetId">
            <el-option v-for="item in combineCompanies.Items" :key="item.CMP_ID" :label="item.CMP_Name"
              :value="item.CMP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" type="textarea" :rows="3">
          <el-input v-model="cmpCombineReq.remark" type="textarea" :rows="3" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="combineCompany" type="text" icon="el-icon-connection" title="合并">
            合并
          </el-button>
          <el-button @click="cmpCombineVis = false" type="text" title="取消">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="empCombineVis" title="员工信息合并" width="500px">
      <el-form label-width="80px" v-if="chooseEmployee">
        <el-form-item label="原员工" type="textarea" :rows="3">
          <el-input v-model="chooseEmployee.USR_Name" disabled></el-input>
        </el-form-item>
        <el-form-item label="合并至">
          <el-select style="width: 350px" filterable remote reserve-keyword v-model="empCombineReq.targetId">
            <el-option v-for="item in combineEmps" :key="item.ECV_TargetID" :label="item.USR_Name"
              :value="item.ECV_TargetID">
              【{{ item.USR_Name }}】{{ item.USR_Phone | encodePhone }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" type="textarea" :rows="3">
          <el-input v-model="empCombineReq.remark" type="textarea" :rows="3" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="combineEmployee" type="text" icon="el-icon-connection" title="合并">
            合并
          </el-button>
          <el-button @click="empCombineVis = false" type="text" title="取消">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  combineCompany,
  getCompanies,
  addCompany,
  editCompany,
  deleteCompany,
  getEmployees,
  getCombineEmployees,
  addEmployee,
  editEmployee,
  combineEmployee,
  deleteEmployee,
  freezeEmployee,
  unfreezeEmployee,
  getAuths,
  getCompanyAuths,
  addCompanyAuth,
  deleteCompanyAuth,
  getCompanyDepartments,
} from '@/api/flowCenter/platform/companyManage'

export default {
  data: function () {
    return {
      sexes: [
        { val: 1, label: '男' },
        { val: 0, label: '女' },
      ],
      auths: [],
      cmpAuths: [],
      cmpDpms: [],
      combineCompanies: [],
      cmpReq: {
        pageIndex: 1,
        pageSize: 10,
        keyword: null,
      },
      cmpRes: {
        Items: [],
        Total: 0,
      },
      empReq: {
        cmpId: 0,
        pageIndex: 1,
        pageSize: 10,
        keyword: null,
      },
      empRes: {
        Items: [],
        Total: 0,
      },
      combineEmps: [],

      newCompany: {},
      chooseCompany: null,
      newShortName: '',
      newEmployee: {},
      chooseEmployee: null,
      cmpCombineReq: {
        sourceId: null,
        targetId: null,
        remark: null,
      },
      empCombineReq: {
        sourceId: null,
        targetId: null,
        remark: null,
      },
      cmpCombineVis: false,
      empCombineVis: false,
      addCompanyVis: false,
      editCompanyVis: false,
      addShortNameVis: false,
      addEmployeeVis: false,
      editEmployeeVis: false,
      addCompanyAuthVis: false,
    }
  },
  methods: {
    getCombineCompanies(keyword) {
      getCompanies({ keyword }).then(({ data }) => {
        this.combineCompanies = data
      })
    },
    getCompanies: function () {
      getCompanies(this.cmpReq).then(({ data }) => {
        this.cmpRes = data
      })
    },
    showEmployeeCombine(emp) {
      this.chooseEmployee = emp
      if (this.chooseCompany) {
        getCombineEmployees({
          cmpId: this.chooseCompany.CMP_ID,
          empId: this.chooseEmployee.ECV_TargetID,
        }).then(({ data }) => {
          this.combineEmps = data
          this.empCombineVis = true
        })
      }
    },
    addCompany() {
      this.$refs.newCompany.validate((valid) => {
        if (valid) {
          this.$confirm('请确认录入公司信息是否无误。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              addCompany(this.newCompany).then(() => {
                this.getCompanies()
                this.newCompany = {}
                this.addCompanyVis = false
                this.$refs.newEmployee.resetFields()
              })
            })
            .catch(() => {
              return
            })
        } else {
          return false
        }
      })
    },
    showAddShortName() {
      this.addShortNameVis = true
      this.$nextTick(() => {
        this.$refs.newShortName.$refs.input.focus()
      })
    },
    addShortName(company) {
      if (!company.shortNames) {
        company.shortNames = []
      }
      if (this.newShortName) {
        company.shortNames.push(this.newShortName)
      }
      this.newShortName = ''
      this.addShortNameVis = false
    },
    editCompany() {
      this.$refs.chooseCompany.validate((valid) => {
        if (valid) {
          this.$confirm('请确认信息是否无误。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              editCompany(this.chooseCompany).then(({ data }) => {
                this.getCompanies()
                this.editCompanyVis = false
              })
            })
            .catch(() => {
              return
            })
        } else {
          return false
        }
      })
    },
    deleteCompany(cmpId) {
      this.$confirm(`是否删除该公司`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          deleteCompany(cmpId).then(({ data }) => {
            this.getCompanies()
            this.chooseCompany = null
            this.getEmployees()
          })
        })
        .catch(() => {
          return
        })
    },
    getEmployees() {
      if (this.chooseCompany) {
        this.empReq.cmpId = this.chooseCompany.CMP_ID
        getEmployees(this.empReq).then(({ data }) => {
          this.empRes = data
        })
      } else {
        this.empRes = this.$options.data().empRes
      }
    },
    addEmployee() {
      this.$refs.newEmployee.validate((valid) => {
        if (valid) {
          this.$confirm('请确认录入用户信息是否无误。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              if (this.chooseCompany) {
                this.newEmployee.EMP_CmpId = this.chooseCompany.CMP_ID
                addEmployee(this.newEmployee).then(() => {
                  this.getEmployees()
                  this.newEmployee = {}
                  this.addEmployeeVis = false
                  this.$refs.newEmployee.resetFields()
                })
              }
            })
            .catch(() => {
              return
            })
        } else {
          return false
        }
      })
    },
    editEmployee() {
      if (!this.chooseEmployee) {
        return
      }
      this.$confirm(`是否保存？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          editEmployee(this.chooseEmployee).then(() => {
            this.getEmployees()
            this.editEmployeeVis = false
          })
        })
        .catch(() => {
          return
        })
    },
    combineCompany() {
      if (!this.chooseCompany) {
        return
      }
      this.cmpCombineReq.sourceId = this.chooseCompany.CMP_ID
      this.$confirm(
        `是否将${this.chooseCompany.CMP_Name}合并至该公司，公司合并后，原公司相关的信息（如员工、案件、日志等）会合并至新公司中，请谨慎操作`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info',
        }
      )
        .then(() => {
          combineCompany(this.cmpCombineReq).then(({ data }) => {
            this.getCompanies()
            this.chooseCompany = null
            this.getEmployees()
            this.cmpCombineVis = false
          })
        })
        .catch(() => {
          return
        })
    },
    combineEmployee() {
      if (!this.chooseEmployee) {
        return
      }
      this.empCombineReq.sourceId = this.chooseEmployee.ECV_TargetID
      this.$confirm(
        `是否将${this.chooseEmployee.USR_Name}信息合并到该员工中？信息合并后，原员工相关的各种信息（如案件、日志、票据等）都会合并到新员工中，请谨慎操作`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info',
        }
      )
        .then(() => {
          combineEmployee(this.empCombineReq).then(({ data }) => {
            this.getEmployees()
            this.empCombineVis = false
          })
        })
        .catch(() => {
          return
        })
    },
    freezeEmployee(id) {
      this.$confirm(`是否注销用户？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        freezeEmployee(id).then(() => {
          this.getEmployees()
        })
      })
    },
    unfreezeEmployee(id) {
      this.$confirm(`是否解冻用户？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        unfreezeEmployee(id).then(() => {
          this.getEmployees()
        })
      })
    },
    deleteEmployee(id) {
      this.$confirm(`是否删除用户？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteEmployee(id).then((r) => {
          this.getEmployees()
        })
      })
    },
    getAuths() {
      getAuths().then(({ data }) => {
        this.auths = data
      })
    },
    getCompanyAuths: function () {
      if (this.chooseCompany) {
        getCompanyAuths({
          cmpId: this.chooseCompany.CMP_ID,
        }).then(({ data }) => {
          this.cmpAuths = data
        })
      }
    },
    addCompanyAuth(authId) {
      addCompanyAuth({
        CA_AuthId: authId,
        CA_CompanyId: this.chooseCompany.CMP_ID,
      }).then(() => {
        this.getCompanyAuths()
      })
    },
    deleteCompanyAuth(id) {
      this.$confirm(
        `是否删除该权限,此操作可能影响到该公司用户的使用？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        deleteCompanyAuth(id).then((r) => {
          this.getCompanyAuths()
        })
      })
    },
    getCompanyDepartments: function () {
      if (this.chooseCompany) {
        getCompanyDepartments({
          cmpId: this.chooseCompany.CMP_ID,
        }).then(({ data }) => {
          this.cmpDpms = data
        })
      }
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getAuths()
    this.getCompanies()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: calc(100% - 130px);
  display: flex;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
